<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head th:replace="nav :: navHeaderIFrame(~{::title},~{::link})">
    <title>tinyservices-id</title>
    <link rel="stylesheet" type="text/css" th:href="@{../css/snowflake/snowflake.css}"/>
</head>
<body>
<div id="c_win">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">业务类型</label>
                <div class="layui-input-inline">
                    <select name="modules" lay-verify="required" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                        <option value="1">layer</option>
                        <option value="2">form</option>
                        <option value="3">layim</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </form>
    <table class="layui-hide" id="tableData" lay-filter="table"></table>

</div>
<div th:include="nav::navFooterIFrame" ></div>

<script type="text/html" id="leftTopTool">
    <a class="layui-btn layui-btn-warm layui-btn-xs leftTopTool" data-type="add" >新增</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs leftTopTool" data-type="batchDel">批量删除</a>
</script>

<script type="text/html" id="barDemo" >
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">明细</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use(['table'],function(){
        let table = layui.table,
            $ = layui.$;

        table.render({
            elem: '#tableData'
            ,data: dataStr
            ,toolbar: '#leftTopTool' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print']
            ,title: '用户数据表'
            ,cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'ID', width:200}
                    ,{field:'bizType', title:'业务类型'}
                    ,{field:'beginId', title:'开始id'}
                    ,{field:'maxId', title:'当前最大id'}
                    ,{field:'step', title:'步长', width:200}
                    ,{field:'createTime', title:'创建时间', width:200}
                    ,{field:'updateTime', title:'修改时间', width:200}
                    ,{field:'isNeedInit', title:'是否初始化', width:200,templet: function(res){
                        return  res.isNeedInit ? "初始化":"不初始化"
                    }}
                    ,{fixed: 'right',title:'操作', width:178, align:'center', toolbar: '#barDemo'}
                ]
            ],done: function(res, curr, count){
                /**
                 * 左侧自定义工具栏触发功能
                 */
                $('.leftTopTool').on('click', function(){
                    let type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
            }
            ,page: true
        });

        //行内工具条
        table.on('tool(table)', function(obj){
            let data = obj.data;
            switch(obj.event){
                case 'edit':
                    edit(data.id)
                    break;
                case 'del':
                    del(data.id);
                    break;
                case 'detail':
                    detail(data.id);
                    break;
            }
        });


        const active = {
            /**
             * 新增功能
             */
            add: function () {
                add();
            },
            /**
             * 批量删除
             */
            batchDel: function () {
                //获取选中数据
                let checkStatus = table.checkStatus('tableData'), data = checkStatus.data;
                if(data.length > 0){
                    let datas = data.map(item => ({id: item.id}));
                    batchDel(datas);
                }else{
                    layer.msg("未选中需删除数据")
                }

            },
        };

        //--------------封装类通用功能
        /**
         * 新增功能
         */
        function add(){
            parent.layer.open({
                type: 2,
                skin: 'layui-layer-rim',
                area: ['60%', '80%'],
                title: '新增',
                content: "/item/snowflake/add"
            });

        }

        /**
         * 编辑功能
         * @param id
         */
        function edit(id){
            parent.layer.open({
                type: 2,
                skin: 'layui-layer-rim',
                area: ['60%', '80%'],
                title: '编辑',
                content: "/item/snowflake/edit/123456"
            });
        }

        /**
         * 明细功能
         * @param id
         */
        function detail(id){
            parent.layer.open({
                type: 2,
                skin: 'layui-layer-rim',
                area: ['60%', '80%'],
                title: '明细',
                content: "/item/snowflake/detail/123456",
            });
        }

        /**
         * 删除功能
         * @param id
         */
        function del(id){
            $.ajax({
                type : "POST",
                contentType: "application/json;charset=UTF-8",
                url : "http://127.0.0.1/admin/list/",
                data : id,
                success : function(result) {
                    layer.msg('删除成功');
                },
                error : function(e){
                    layer.msg('服务异常');
                }
            });
        }

        /**
         * 批量删除功能
         * @param lists
         */
        function batchDel(lists){
            $.ajax({
                type : "POST",
                contentType: "application/json;charset=UTF-8",
                url : "http://127.0.0.1/admin/list/",
                data : JSON.stringify(lists),
                success : function(result) {
                    layer.msg('删除成功');
                },
                error : function(e){
                    layer.msg('服务异常');
                }
            });
        }


    });

</script>
</body>
</html>